<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
  
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin: 0px;
			padding: 0px;
		}
		.two_header{
			width: 990px;
			height: 42px;
			margin: auto;
			background-color: black;
		}
		.two_logo{
			width: 691px;
			height: 42px;
			margin: auto;

		}
		.two_web{
			width: 95px;
			height: 41px;
			text-align: center;
		}
		#two_li1{
			list-style-type: none;
			width: 58px;
			height: 41px;
			text-align: center;
			display: inline-block;
			margin-left: 7px;
		}
		#two_li1,.two_web{
			display: inline-block;
			vertical-align: middle;
			
		}
		a{
			text-decoration: none;
			color: white;
			text-align: center;
			
		}
		li:hover{
			background-color: red; 
		}
		.two_more{
			background-color: black;
		}
		#two_option{
			color: white;
		}
		#two_li2{
			width: 58px;
			height: 30px;
			margin-left: 923px;
			list-style-type: none;
		}
		.two_optionvalue{
			width: 58px;
			height: 250px;
			line-height: 30px;
			margin-top: 20px;
			background-color: black;

		}
		
		.two_p{
			width: 58px;
			height: 31.25px;
		}
		.two_p:hover{
			background-color: red;
		}
		.two_sort{
			width: 670px;
			height: 120px;
			margin: auto;
			background-color: rgb(247,246,242);
			line-height: 50px;
			text-align: center;
			margin-bottom: 20px;
		}
		.two_sort>a{
			text-align: center;
			color: black;

		}
		.two_text{
			width: 744px;
			height: 50px;
			margin: auto;
			background-color: rgb(247,246,242);
			text-align: center;
			line-height: 50px;
		}
		.two_footer{
			width: 744px;
			margin: auto;
			margin-top: 50px;
		}
		.two_sort>a:hover{
			color: red;

		}
		.two_introduce{
			width: 585px;
		}
		.two_introduce>h5{
			overflow-wrap:break-word; 
		}
		.two_introduce>input{
			color: white;
			float: right;
			width: 99px;
			height: 33px;
			background-color: red;
			text-align: center;
			margin-right: 20px;
			margin-top: -15px;
			line-height: 30px;
			border:1px solid white;
			cursor: pointer;
			
		}
		.two_img>a>img{
			width:140px;
			height:170px;
		}
		.two_introduce,.two_img{
			vertical-align: top;
			display: inline-block;
		}
		.two_h31{
			color:red;
		}
	</style>
</head>
<script src="js/jquery-3.7.1.js">
</script>
<body>
	<div class="two_select">
		<div class="two_header">
			<div class="two_logo">
			<ul>
				<li class="two_web"><a href="">终点小说网</a></li>
				<li id="two_li1"><a href="">玄幻</a></li>
				<li id="two_li1"><a href="">都市</a></li>
				<li id="two_li1"><a href="">仙侠</a></li>
				<li id="two_li1"><a href="">科幻</a></li>
				<li id="two_li1" style="width:86px"><a href="">诸天无限</a></li>
				<li id="two_li1"><a href="">游戏</a></li>
				<li id="two_li1"><a href="">历史</a></li>
				<li id="two_li1" class="two_more" onmouseenter="two_block()" onmouseleave ="two_none()">
					<a  href="">更多</a>
					<div class="two_optionvalue" style="display:none">
						<p class="two_p"><a id="two_option" href="">轻小说</a></p>
						<p class="two_p"><a id="two_option" href="">奇幻</a></p>
						<p class="two_p"><a id="two_option" href="">武侠</a></p>
						<p class="two_p"><a id="two_option" href="">悬疑</a></p>
						<p class="two_p"><a id="two_option" href="">军事</a></p>
						<p class="two_p"><a id="two_option" href="">现实</a></p>
						<p class="two_p"><a id="two_option" href="">体育</a></p>
						<p class="two_p"><a id="two_option" href="">短篇</a></p>
					</div>
				</li>
			</ul>
			</div>
		</div>
		<div class="two_middle">
			<div class="two_sort">
				分类&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="">玄幻</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="">仙侠</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="">都市</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="">科幻</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="">游戏</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="">历史</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="">体育</a><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="">悬疑</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="">奇幻</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="">轻小说</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="">现实</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="">短篇</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="">武侠</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="">军事</a>
			</div>
		</div>
			<div class="two_text">
				<h3>搜索结果如下</h3>
			</div>
			<c:forEach items="${novelid }" var="list" varStatus="status1">
				<div class="two_footer">
					<div class="two_img">
					
						<a href="ShuServlet?novelId=${list.novelId }"><img src="image/${list.novelImgURL}" alt=""></a>
					</div>
					<div class="two_introduce">
						<h3 class="two_h31">作品:${list.novelName }</h3>
						<h4>作者:${list.writerName }</h4><br>
						<h5>作品简介:&nbsp;&nbsp;&nbsp;${list.novelIntroduction }</h5><br>
						<h5>最新更新:${list.releaseTime }</h5>
							<c:if test="${list.isCollection == 1  }">
								<input type="button" style="pointer-events:none" id="${list.novelId }" onclick="two_like(${list.novelId })" value="已加入书架">
							</c:if>
							<c:if test="${list.isCollection == 0  }">
								<input type="button" id="${list.novelId }" onclick="two_like(${list.novelId })" value="加入书架">
							</c:if>		
					</div>
					<div class="two_booka">
				
					</div>
				</div>
			</c:forEach>
	</div>
</body>
<script>		
	function two_block(){
		//alert("进入了");
		$(".two_optionvalue").css("display","block");
	}
	function two_none(){
		//-alert("离开了");
		$(".two_optionvalue").css("display","none");
	}
	function two_like(novelid){
		$.ajax({
			"type":"get",
			"url":"InsertLikeservlet",
			"datatype":"text",
			"data":"novelid="+novelid,
			"success":function(dataJson){
					$("#"+dataJson).attr("value","已加入书架");
					$("#"+dataJson).css("pointer-events","none");
			}
		});
	}
	
</script>
</html>